<template>
  <div>
    <van-nav-bar left-text="返回" left-arrow fixed>
      <template #left>
        <div class="city" @click="getCity">
          {{ citys }}
        </div>
        <van-icon name="arrow-down" />
        <div class="shu">|</div>
      </template>
    </van-nav-bar>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imgList" :key="item.id">
        <img
          :src="'http://liufusong.top:8080' + item.imgSrc"
          alt=""
          class="img"
        />
      </van-swipe-item>
    </van-swipe>

    <van-tabbar route>
      <van-tabbar-item icon="wap-home-o" to="/home"> 首页 </van-tabbar-item>
      <van-tabbar-item icon="search" to="/home/list">找房</van-tabbar-item>
      <van-tabbar-item icon="newspaper-o" to="/home/news">资讯</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/home/profile">我的</van-tabbar-item>
    </van-tabbar>
    <van-icon name="upgrade" class="icon" @click="clickMap" />
    <div class="housePath">
      <div>
        <img src="../../assets/房子资料.png" alt="" />
        <div class="div">整租</div>
      </div>
      <div>
        <img src="../../assets/小人儿.png" alt="" />
        <div class="div">合租</div>
      </div>
      <div>
        <img src="../../assets/地图.png" alt="" />
        <div class="div">地图查找</div>
      </div>
      <div>
        <img src="../../assets/小房子.png" alt="" />
        <div class="div">去出租</div>
      </div>
      <!-- 房屋小组 -->
      <div class="housemini">
        <div class="elss">
          <h3>租房小组</h3>
          <div>更多</div>
        </div>
        <div class="boxf">
          <div class="boxs">
            <img src="../../assets/小房子.png" alt="" />
            <p class="ps">家住回龙观</p>
            <p class="pss">归属的感觉</p>
          </div>
          <div class="boxs">
            <img src="../../assets/小房子.png" alt="" />
            <p class="ps">家住回龙观</p>
            <p class="pss">归属的感觉</p>
          </div>
          <div class="boxs">
            <img src="../../assets/小房子.png" alt="" />
            <p class="ps">家住回龙观</p>
            <p class="pss">归属的感觉</p>
          </div>
          <div class="boxs">
            <img src="../../assets/小房子.png" alt="" />
            <p class="ps">家住回龙观</p>
            <p class="pss">归属的感觉</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { imgAPI, conkeyAPI } from '@/api/index.js'
export default {
  data () {
    return {
      imgList: []
    }
  },

  methods: {
    async getCity () {
      const { data: res } = await conkeyAPI()
      console.log(res)
    },
    clickMap () {
      this.$router.push('/map')
    }

  },
  async created () {
    const { data: res } = await imgAPI()
    this.imgList = res.body
    console.log(this.imgList)
  },
  computed: {
    citys () {
      return window.localStorage.getItem('label')
    }
  }
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
}
.img {
  height: 212px;
}
.van-nav-bar {
  top: 26px;
  width: 310px;
  margin-left: 20px;
  border-radius: 5px;
}
/deep/.van-nav-bar__content {
  height: 32px;
}
.shu {
  margin-left: 10px;
  color: #e2e2e2;
}
.city {
  margin-left: -8px;
}
.icon {
  position: absolute;
  top: 31px;
  right: 10px;
}
.van-nav-bar__left {
  cursor: pointer;
}
.housePath {
  position: absolute;
  top: 212px;
  width: 100%;
  height: 122.5px;
  // background-color: pink;
  display: flex;
  justify-content: space-evenly;
  text-align: center;

  img {
    width: 60px;
    height: 60px;
    margin-top: 20px;
  }
  .div {
    font-size: 14px;
    margin-top: 7px;
  }
}
.housemini {
  position: absolute;
  top: 122.5px;
  width: 100%;
  height: 187.25px;
  background-color: #f6f5f6;
  .elss {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    h3 {
      margin-left: 8px;
      margin-top: 10px;
      color: #333333;
    }
    div {
      margin-right: 8px;
      margin-top: 10px;
      color: #85898c;
    }
  }
  .boxf {
    position: absolute;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .boxs {
      width: 172.5px;
      height: 50px;

      img {
        width: 50px;
        height: 50px;
        margin-left: -115px;
        margin-top: 0px;
      }
      p{
        font-size: 12px;

      }
      .ps{
        margin-left: 35px;
        margin-top: -40px;
        margin-bottom: -15px;
      }
      .pss{
        margin-left: 35px;
      }
      background-color: #fff;
      &:nth-child(1) {
        margin-left: 10px;
        margin-bottom: 10px;
      }
      &:nth-child(3) {
        margin-left: 10px;
      }
      &:nth-child(2) {
        margin-right: 10px;
        margin-bottom: 10px;
      }
      &:nth-child(4) {
        margin-right: 10px;
      }
    }
  }
}
</style>
